<template>
	<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px">
		<el-breadcrumb-item v-for="item in breadscrumList" :to="item.path" :key="item.name">{{item.name}}</el-breadcrumb-item>
	</el-breadcrumb>
</template>

<script>
	export default {
		name: "BreadscrumNav",
		data() {
			return {
				breadscrumList: []
			}
		},
		watch: {
			$route() {
				this.getBreadscrumList();
			}
		},
		methods: {
			// 面包屑元素根据路由元素自动生成
			getBreadscrumList() {
				this.breadscrumList = this.$route.matched;
			}
		},
		created() {
			this.getBreadscrumList();
		}
	}
</script>

<style>
	#app .el-breadcrumb__inner.is-link {
		color: rgb(255, 255, 255, 0.6);
	}

	#app .el-breadcrumb__item:last-child .el-breadcrumb__inner {
		color: rgb(255, 255, 255, 0.87);
	}
</style>
